<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
     <!-- 查询条件 -->
    <el-form ref="searchForm" :model="searchForm" label-width="100px" inline class="demo-form-inline" size="small" style="border-bottom: 1px solid #f6f6f6">
      <el-form-item label="关键字" prop="keyword">
        <el-input v-model="searchForm.keyword" placeholder="用户昵称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="
            searchForm.current = 1;
            search();
          ">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">标签列表</div>
      </div>
      <el-table :data="tableData" style="width: 100%" @selection-change="tableSelectionChange" row-key="ifId" border lazy :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="selection" width="120"> </el-table-column>
        <el-table-column prop="trainId" label="报名id" > </el-table-column>
        <el-table-column prop="userId" label="用户id" > </el-table-column>
        <el-table-column prop="phone" label="手机号" > </el-table-column>
        <el-table-column prop="addtime" label="报名时间" > </el-table-column>
        <el-table-column prop="nickname" label="报名人昵称" > </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </section>
</template>
<style>
</style>
<script>
import mixins from '@/utils/mixins'
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";

export default {
  mixins: [mixins],
  components: {
    btns,
    breadcrumbs,
  },
  data() {
    return {
      id:'',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      formLabelWidth: "120px",
      searchForm: {
        keyword: "",
      },
    }
  },
  created() {
    this.id=this.$route.query.id || "";
    this.orderList();
  },
  methods: {
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
    search() {
      this.orderList();
    },
    orderList() {
      this.$api.train.getTrainSignList({
          current: this.currentPage,
          size:  this.pageSize,
          keyword: this.searchForm.keyword,
          trainId: this.id,
        }).then(d => {
        this.tableData = d.data;
        this.total = d.totalCount;
      }).catch(e => {
        console.log(e);
      })
    },
    handleReset() {
      this.searchForm = {
        keyword: '',
      }
      this.endTimee = "",
        this.beginTimee = "",
        this.search();
    },
    handleSizeChange (v) {
      console.log(v)
      this.searchForm.size = v;
      this.orderList(this.searchForm.current, v);
    },
    handleCurrentChange (v) {
      this.searchForm.current = v;
      this.orderList(v, this.searchForm.size,  v);
    },
  }
}
</script>
<style scoped>
.top-box {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.top-item {
  border: 1px rgb(189, 185, 185) solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-right: 100px;
}
.top-icon {
  width: 30%;
  height: 30%;
  margin-right: 30px;
  margin-left: 30px;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}
.f18 {
  font-size: 25px;
  font-weight: 700;
}
.mgb-20 {
  font-size: 16px;
}
</style>
